<template>
    <view class="container">
        <view class="collect-switch">
            <view :class="'item ' + (type == 0 ? 'active' : '')" @tap="switchTab" data-index="0">
                <view class="txt">商品收藏</view>
            </view>
            <view :class="'item ' + (type == 1 ? 'active' : '')" @tap="switchTab" data-index="1">
                <view class="txt">专题收藏</view>
            </view>
        </view>
        <view class="no-collect" v-if="collectList.length <= 0">
            <view class="c">
                <text>还没有收藏</text>
            </view>
        </view>
        <view :class="type == 0 ? 'goods-list' : 'topic-list'" v-else>
            <view class="item" @tap="openCollect" @touchstart="touchStartFun" @touchend="touchEndFun" :data-index="index" v-for="(item, index) in collectList" :key="item.id">
                <image class="img" :src="item.picUrl"></image>

                <view class="info" v-if="type == 0">
                    <view class="name">{{ item.name }}</view>
                    <view class="subtitle">{{ item.brief }}</view>
                    <view class="price">￥{{ item.retailPrice }}</view>
                </view>

                <view class="info" v-if="type == 1">
                    <text class="title">{{ item.title }}</text>
                    <text class="desc">{{ item.subtitle }}</text>
                    <text class="price">{{ item.price }}元起</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
var util = require('../../../utils/util.js');

var api = require('../../../config/api.js');

var app = getApp();
export default {
    data() {
        return {
            type: 0,
            collectList: [],
            page: 1,
            limit: 10,
            totalPages: 1,
            touchStart: '',
            touchEnd: ''
        };
    },
    onLoad: function (options) {
        this.getCollectList();
    },
    onReachBottom() {
        if (this.totalPages > this.page) {
            this.setData({
                page: this.page + 1
            });
            this.getCollectList();
        } else {
            uni.showToast({
                title: '没有更多用户收藏了',
                icon: 'none',
                duration: 2000
            });
            return false;
        }
    },
    onReady: function () {},
    onShow: function () {},
    onHide: function () {
        // 页面隐藏
    },
    onUnload: function () {
        // 页面关闭
    },
    methods: {
        getCollectList() {
            uni.showLoading({
                title: '加载中...'
            });
            let that = this;
            util.request(api.CollectList, {
                type: that.type,
                page: that.page,
                limit: that.limit
            })
                .then(function (res) {
                    if (res.errno === 0) {
                        that.setData({
                            collectList: that.collectList.concat(res.data.list),
                            totalPages: res.data.pages
                        });
                    }
                })
                .finally(() => {
                    uni.hideLoading();
                });
        },

        switchTab: function (event) {
            let type = event.currentTarget.dataset.index;
            this.setData({
                collectList: [],
                type,
                page: 1,
                limit: 10,
                totalPages: 1
            });
            this.getCollectList();
        },

        openCollect(event) {
            let that = this;
            let index = event.currentTarget.dataset.index;
            let valueId = this.collectList[index].valueId; //触摸时间距离页面打开的毫秒数

            var touchTime = that.touchEnd - that.touchStart; //如果按下时间大于350为长按

            if (touchTime > 350) {
                uni.showModal({
                    title: '',
                    content: '确定删除吗？',
                    success: function (res) {
                        if (res.confirm) {
                            util.request(
                                api.CollectAddOrDelete,
                                {
                                    type: that.type,
                                    valueId: valueId
                                },
                                'POST'
                            ).then(function (res) {
                                if (res.errno === 0) {
                                    uni.showToast({
                                        title: '删除成功',
                                        icon: 'success',
                                        duration: 2000
                                    });
                                    that.collectList.splice(index, 1);
                                    that.setData({
                                        collectList: that.collectList
                                    });
                                }
                            });
                        }
                    }
                });
            } else {
                var prefix = '/pages/goods/goods?id=';

                if (this.type == 1) {
                    prefix = '/pages/topicDetail/topicDetail?id=';
                }

                uni.navigateTo({
                    url: prefix + valueId
                });
            }
        },

        //按下事件开始
        touchStartFun: function (e) {
            let that = this;
            that.setData({
                touchStart: e.timeStamp
            });
        },

        //按下事件结束
        touchEndFun: function (e) {
            let that = this;
            that.setData({
                touchEnd: e.timeStamp
            });
        }
    }
};
</script>
<style>
@import './collect.css';
</style>
